<template>
	<div>
		<div class="topTitle">首页商品推荐</div>
		<el-form :model="query" inline label-width="auto">
			<el-form-item label="模糊搜索">
				<el-input v-model="query.name" placeholder="请输入" class="width260 margin-right10"></el-input>
			</el-form-item>
			<el-form-item label="发布地区">
				<el-cascader :props="{emitPath: false,value: 'id',label: 'name'}" v-model="query.city" :options="areaData"
					placeholder="请选择地区" class="width260 margin-right10"></el-cascader>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="handleSearch">查询</el-button>
				<el-button @click="handleRefresh">重置</el-button>
			</el-form-item>
		</el-form>
		<div class="margin-bottom20">
			<el-button type="primary" @click="handleAdd({})">新建</el-button>
			<el-button type="primary" @click="batchDel">批量删除</el-button>
		</div>
		<el-table ref="multipleTable" :data="tableData" style="margin-top: 20px;" border
			@selection-change="handleSelectionChange">
			<el-table-column type="selection" align="center"></el-table-column>
			<el-table-column type="index" align="center" label="序号" width="80"></el-table-column>
			<el-table-column label="商品图片">
				<template slot-scope="scope">
					<el-image class="width60 height60 margin-right10" :src="scope.row.image" fit="scale-down"
						:preview-src-list="[scope.row.image]"></el-image>
				</template>
			</el-table-column>
			<el-table-column label="标题" align="center" prop="title" width="500"></el-table-column>
			<el-table-column label="发布地区" align="center">
				<template slot-scope="scope">
					<div class="row-me row-center line1">
						<div class="margin-right10" v-if="scope.row.provinceName">{{ scope.row.provinceName }}</div>
						<div v-if="scope.row.cityName">{{ scope.row.cityName }}</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="clickCount" label="点击次数" align="center" width="80"></el-table-column></el-table-column>
			<el-table-column label="价格(元)" align="center" prop="price"></el-table-column>
			<el-table-column label="标签" align="center" prop="labelName"></el-table-column>
			<el-table-column label="排序" prop="sort" width="80" align="center"></el-table-column>
			<el-table-column label="操作" align="center" fixed="right">
				<template slot-scope="scope">
					<el-button type="text" size="small" @click="handleAdd(scope.row)">编辑</el-button>
					<el-popconfirm title="确定删除吗？" @confirm="handleDel(scope.row.id)">
						<el-button slot="reference" type="text" size="small">删除</el-button>
					</el-popconfirm>
				</template>
			</el-table-column>
		</el-table>
		<div class="margin-top10">
			<el-pagination background layout="->,total,sizes, prev, pager, next" :page-sizes="[30, 40, 50, 60]"
				@size-change="handleSizeChange" :current-page="query.pageNumber" :total="pageTotal"
				@current-change="handlePageChange">
			</el-pagination>
		</div>

		<!-- 新建编辑 -->
		<el-dialog :title="title" :visible.sync="visible" width="40%">
			<el-form ref="form" :model="form" label-width="80px" :rules="rules">
				<el-form-item label="标题" prop="title">
					<el-input v-model="form.title" placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item label="描述">
					<el-input v-model="form.description" placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item label="标签">
					<el-input v-model="form.labelName" placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item label="排序">
					<el-input v-model="form.sort" placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item label="价格" prop="price">
					<el-input v-model="form.price" placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item label="销量">
					<el-input v-model="form.salesCount" placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item label="选择地区" porp="area">
					<el-cascader class="width100Per" :props="props" v-model="form.area" :options="areaData" placeholder="请选择地区"
						@change="areaChange"></el-cascader>
				</el-form-item>
				<el-form-item label='适用地区' prop="cityAddress">
					<el-input v-model="form.cityAddress" placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item label="跳转类型" prop="type">
					<el-radio-group v-model="form.type" @change="form.objectId=''">
						<el-radio :label="1">商品跳转</el-radio>
						<el-radio :label="2">专题跳转</el-radio>
					</el-radio-group>
					<div class="margin-top10">
						<el-select v-model="form.objectId" filterable placeholder="请选择" v-if="form.type==1" clearable>
							<el-option v-for="(item,index) in productData" :key="index" :label="item.name"
								:value="item.id"></el-option>
						</el-select>
						<el-select v-model="form.objectId" filterable placeholder="请选择" v-if="form.type==2" clearable>
							<el-option v-for="(item,index) in subjectData" :key="index" :label="item.name"
								:value="item.id"></el-option>
						</el-select>
					</div>
				</el-form-item>
				<el-form-item label="封面图">
					<div class="row-me row-center">
						<el-image fit='scale-down' v-if="form.image" class="width80 height80 margin-right10 margin-left10"
							:src="form.image" :preview-src-list="[form.image]"></el-image>
						<el-button type="text" @click="clickImg()">上传封面图</el-button>
					</div>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="visible = false">取 消</el-button>
				<el-button type="primary" @click="handleSave">确 认</el-button>
			</span>
		</el-dialog>

		<imgLibrary ref="imgLibrary" @handleImgOk="handleImgOk"></imgLibrary>
	</div>
</template>

<script>
	import imgLibrary from "@/components/imgLibrary"
	export default {
		components: {
			imgLibrary
		},
		data() {
			return {
				query: {
					pageNumber: 1,
					pageSize: 30
				},
				pageTotal: 0,
				tableData: [],
				areaData: [],
				form: {},
				title: '',
				visible: false,
				multipleSelection: [],
				props: {
					value: 'id',
					label: 'name',
					checkStrictly: true,
					multiple: true
				},
				rules: {
					title: {
						required: true,
						message: '请输入标题',
						trigger: 'blur'
					},
					price: {
						required: true,
						message: '请输入价格',
						trigger: 'blur'
					},
					area: {
						required: true,
						message: '请选择地区',
						trigger: 'change'
					},
					cityAddress: {
						required: true,
						message: '请选择适用地区',
						trigger: 'change'
					},
					type: {
						required: true,
						message: '请选择跳转类型',
						trigger: 'change'
					},
					image: {
						required: true,
						message: '请上传封面图',
						trigger: 'change'
					}
				},
				productData: [],
				subjectData: []
			}
		},
		mounted() {
			this.getAllArea()
			this.getData()
			this.getProductData()
			this.getSubjectData()
		},
		methods: {
			clickImg() {
				this.$refs.imgLibrary.show()
			},
			handleImgOk(data) {
				this.$set(this.form, 'image', data)
			},
			//获取所有商品
			async getProductData() {
				const res = await this.$get('/admin/mall/pageProduct', {
					pageNumber: 1,
					pageSize: 9999
				})
				if (res.code == 1000) {
					this.productData = res.data.list
				}
			},
			//获取所有专题
			async getSubjectData() {
				const res = await this.$get('/admin/specialSubject/pageSubject', {
					pageNumber: 1,
					pageSize: 9999
				})
				if (res.code == 1000) {
					this.subjectData = res.data.list
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			areaChange(val) {
				this.form.province = []
				this.form.city = []
				if (val.length != 0) {
					for (let item of val) {
						if (item[0]) {
							this.form.province.push(item[0])
						}
						if (item[1]) {
							this.form.city.push(item[1])
						}
					}
				}
				this.form.showCode = JSON.stringify(val)
				this.form.province = [...new Set(this.form.province)].toString()
				this.form.city = [...new Set(this.form.city)].toString()
			},
			handleSave() {
				this.$refs['form'].validate((valid) => {
					if (valid) {
						this.$post('/admin/videos/mallAdverUpdateOrInsert', this.form).then(res => {
							if (res.code == 1000) {
								this.$message.success('操作成功')
								this.getData()
								this.visible = false
							}
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			// 分页导航
			handlePageChange(val) {
				this.$set(this.query, 'pageNumber', val);
				this.getData();
			},
			handleSizeChange(val) {
				this.$set(this.query, 'pageSize', val);
				this.getData();
			},
			handleAdd(row) {
				if (row.id) {
					this.title = '编辑'
					this.form = JSON.parse(JSON.stringify(row))
					this.form.area = this.form.showCode ? JSON.parse(this.form.showCode) : []
				} else {
					this.title = '新增'
					this.form = {}
				}
				this.visible = true
			},
			async getData() {
				const res = await this.$postForm('/admin/videos/mallAdverlAll', this.query)
				if (res.code == 1000) {
					this.tableData = res.data.list
					this.pageTotal = res.data.totalRow
				}
			},
			//删除
			async handleDel(id) {
				const res = await this.$post('/admin/videos/mallAdverDelete', [id])
				if (res.code == 1000) {
					this.getData();
					this.$message.success('删除成功')
				}
			},
			//批量删除
			batchDel() {
				this.$confirm('确定要批量删除吗？', '提示', {
					type: 'warning'
				}).then(() => {
					if (this.multipleSelection.length == 0) return
					let ids = Array.from(this.multipleSelection, ({
						id
					}) => id)
					this.$post('/admin/videos/mallAdverDelete', ids).then(res => {
						if (res.code == 1000) {
							this.$message.success('批量删除成功')
							this.getData()
						}
					})
				}).catch(() => {})
			},
			handleSearch() {
				this.query.pageNumber = 1
				this.getData();
			},
			handleRefresh() {
				this.query = {
					pageNumber: 1,
					pageSize: 30,
					city: ''
				}
				this.getData();
			},
			//获取省市区树
			async getAllArea() {
				const res = await this.$get('/admin/area/getAllArea')
				if (res.code == 1000) {
					this.areaData = this.$.getTreeData(res.data)
					this.areaData.unshift({
						adcode: '0',
						name: '默认',
						parentId: 0,
						id: '0'
					})
				}
			},
		}
	}
</script>

<style>
</style>